<template>
  <div class="home" id="home" ref="home"></div>

  <div
    v-if="planetDetailVisible"
    class="planet-detail"
    :style="{
      top: detailPosition.top + 'px',
      left: detailPosition.left + 'px',
    }"
  >
    <h2>{{ planetMsg.name }} 的详情</h2>
    <p>{{ planetMsg.name }}队伍的得分是 {{ planetMsg.score }}</p>
  </div>
 <screen :currentEve="currentEve" :questionList="questionList" :list="list"></screen>
</template>
<script>
import { reactive } from 'vue';
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import 'animate.css'
import screen from './screen.vue'
import {
  CSS2DRenderer,
  CSS2DObject,
} from 'three/addons/renderers/CSS2DRenderer.js'
import particle from './particle.js'
import { MagmaFlare } from './magmaFlare/MagmaFlare'
import axios from 'axios'
import {
  createFixedOrbits,
  showCloseupForTopThree,
  animateCameraCloseup,
  animateCameraToOriginal,
  initCameraAnimation,
  showScoreLabel,
  createUniverse
} from './methedAll'
import Swal from 'sweetalert2';

let camera = null
let renderer = null
let labelRenderer = null
export default {
  name: 'lesson8',
  components: {
    screen,
  },
  data() {
    return {
      objF:'',
      oldlist:[],
      currentEve:[],
      list:reactive([
        // {
        //   name: '太阳',
        //   R: 10 * 5, //天体半径
        //   URL: 'img/taiyang.jpg', //天体纹理路径
        //   modelPath: '/public/img/1748.gltf', // 飞船模型路径
        //   revolutionR: 0,
        //   score: 0, // 太阳没有得分字段
        //   orbit: null, // 每个行星都有一个轨道
        // },
        // {
        //   name: '水星',
        //   R: 0.8 * 5, //天体半径
        //   URL: 'img/shuixing.jpg', //天体纹理路径
        //   // modelPath: '/public/img/1748.gltf', // 飞船模型路径
        //   modelPath:
        //     '/public/72-baked_animations_intergalactic_spaceships_version_2/Baked_Animations_Intergalactic_Spaceships_Version_2/GLTF_EMBEDDED/Baked_Animations_Intergalactic_Spaceships_Version_2.gltf', // 飞船模型路径
        //   R: 1.5 * 5, //天体半径
        //   // modelPath: '/public/img/zhishengji.gltf', // 飞船模型路径
        //   revolutionR: 120 * 5, //公转半径
        //   score: 0, // 太阳没有得分字段
        //   orbit: null, // 每个行星都有一个轨道
        // },
        // {
        //   name: '金星',
        //   R: 1.5 * 5, //天体半径
        //   URL: 'img/jinxing.jpg', //天体纹理路径
        //   modelPath:
        //     '/public/72-baked_animations_intergalactic_spaceships_version_2/Baked_Animations_Intergalactic_Spaceships_Version_2/GLTF_EMBEDDED/Baked_Animations_Intergalactic_Spaceships_Version_2.gltf', // 飞船模型路径

        //   // modelPath: '/public/img/1748.gltf', // 飞船模型路径
        //   // modelPath: '/public/img/zhishengji.gltf', // 飞船模型路径
        //   revolutionR: 120 * 5, //公转半径
        //   score: 0, // 太阳没有得分字段
        //   orbit: null, // 每个行星都有一个轨道
        // },
        // {
        //   name: '地球',
        //   R: 1.5 * 5, //天体半径
        //   URL: 'img/diqiu.jpg', //天体纹理路径
        //   // modelPath: '/public/img/18-rigged_ufo_gltf/Rigged_UFO_gltf/Rigged_Modular UFO 2.8.glb.gltf', // 飞船模型路径
        //   modelPath:
        //     '/public/72-baked_animations_intergalactic_spaceships_version_2/Baked_Animations_Intergalactic_Spaceships_Version_2/GLTF_EMBEDDED/Baked_Animations_Intergalactic_Spaceships_Version_2.gltf', // 飞船模型路径

        //   // modelPath: '/public/img/1748.gltf', // 飞船模型路径
        //   // modelPath: '/public/img/zhishengji.gltf', // 飞船模型路径
        //   revolutionR: 120 * 5, //公转半径
        //   score: 0, // 太阳没有得分字段
        //   orbit: null, // 每个行星都有一个轨道
        // },
        // {
        //   name: '地球2',
        //   R: 1.5 * 5, //天体半径
        //   URL: 'img/diqiu.jpg', //天体纹理路径
        //   modelPath:
        //     '/public/72-baked_animations_intergalactic_spaceships_version_2/Baked_Animations_Intergalactic_Spaceships_Version_2/GLTF_EMBEDDED/Baked_Animations_Intergalactic_Spaceships_Version_2.gltf', // 飞船模型路径

        //   // modelPath: '/public/img/zhishengji.gltf', // 飞船模型路径
        //   revolutionR: 120 * 5, //公转半径
        //   score: 0, // 太阳没有得分字段
        //   orbit: null, // 每个行星都有一个轨道
        // },
        {
          name: '测试5',
          R: 1.5 * 5, //天体半径
          URL: 'img/diqiu.jpg', //天体纹理路径
          modelPath:
            '/public/72-baked_animations_intergalactic_spaceships_version_2/Baked_Animations_Intergalactic_Spaceships_Version_2/GLTF_EMBEDDED/Baked_Animations_Intergalactic_Spaceships_Version_2.gltf', // 飞船模型路径

          // modelPath: '/public/img/zhishengji.gltf', // 飞船模型路径
          revolutionR: 120 * 5, //公转半径
          score: 0, // 太阳没有得分字段
          orbit: null, // 每个行星都有一个轨道
        },
      ]),
      ceshisocket: '',
      planets: ['第一队', '第二队', '第三队', '第四队', '第五队'],
      intervalId: null,
      K: 5,
      questionList:[],
      scene: null,
      totalScore: 500, // 初始总分
      HighScore: 0, // 最高分
      HighScoreAVE: 0, // 最高分和总分的比值
      planetDetailVisible: false, // 控制详情显示状态
      increaseInterval: null, // 用于保存 setInterval 的引用
      detailPosition: { top: 0, left: 0 }, // 控制详情显示的位置
      planetMsg: null,
      manualHideFlag: false, // 手动隐藏/显示标记
      labelVisibilityState: {}, // 标签的显示状态
    }
  },

  mounted() {
    
    this.$nextTick(() => {
      // this.initThree()
      // initCameraAnimation(camera) 
      // this.intervalId = setInterval(() => {
      //   // const randomPlanet = this.getRandomPlanet()
      //   // this.increaseScore('第一队',1)
      //    this.list.forEach(item=>{
         
      //     item.score+=10
      //   })
        
      // }, 10000)


        
       

      window.addEventListener('resize', this.onWindowResize)
    })
  },
  created () {
    let _that = this
    window.addEventListener('message', function(event) {
      
      if (event.data.token) {
       
          this.objF = event.data
          console.log(this.objF,'this.objFthis.objF');
          _that.fetchCompetitionData(this.objF)
          _that.getTempToken(this.objF)

      }
  });
   
   
  },
  methods: {
    async fetchCompetitionData(objF) {
      console.log(objF,'555555577777');
      
      let this_ = this
      console.log(objF,'我是好人分');
      
      let competitionId = 21
      let token = ''
       competitionId = objF.competitionId
       token =  objF.token 

      try {
        const [questionListResponse, rankResponse] = await Promise.all([
          axios.get(`/target_station/client/competition/ctf/screen_notice_list?competitionId=${competitionId}&&usePosition=competitionScreen`, {
            headers: {
              Authorization: token,
            },
          }),
          axios.get(`/target_station/client/competition/ctf/rank?competitionId=${competitionId}`, {
            headers: {
              Authorization: token,
            },
          }),
        ]);
console.log(questionListResponse,'questionListResponse');

        if (questionListResponse.data.code === 200 && rankResponse.data.code === 200) {
          const questionList = questionListResponse.data.data.list; // 获取公告列表
          const rankList = rankResponse.data.data.rankList; // 获取排名列表

          // 处理数据，例如更新状态
          this.updateData(questionList, rankList);
        } else {
          alert('请求数据失败');
        }
      } catch (error) {
        console.error('Error fetching competition data:', error);
      }
    },
    updateData(questionList, rankList) {
      // 处理更新数据的逻辑
      this.questionList = questionList;
      this.list = rankList.map(item=>{
                return {
                  ...item,
                  R: 1.5 * 5, //天体半径
                  URL: 'img/diqiu.jpg', //天体纹理路径
                  modelPath:
                    '/public/72-baked_animations_intergalactic_spaceships_version_2/Baked_Animations_Intergalactic_Spaceships_Version_2/GLTF_EMBEDDED/Baked_Animations_Intergalactic_Spaceships_Version_2.gltf', // 飞船模型路径
                  revolutionR: 120 * 5, //公转半径
                  orbit: null, // 每个行星都有一个轨道
                }
              });
              this.$nextTick(() => {
              this.initThree()
              initCameraAnimation(camera) 
            })
    },
    // 获取临时 token 的方法
    async getTempToken(objF) {
      try {
        const response = await axios.get('/target_station/common/tmp_token', {
          headers: {
            Authorization: objF.token,
          },
        });

        if (response.data.code == 200) {
          const token = response.data.data.token;
          this.connectWebSocket(token);
        } else {
          const result = await Swal.fire({
            title: '提示',
            text: response.data.msg,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: '返回首页',
            cancelButtonText: '取消',
          });

          if (result.isConfirmed) {
            window.location.href = 'http://172.17.192.1:3000/pk/index'; // 根据你的首页路径调整
          }
        }
      } catch (error) {
        console.error('Error fetching temporary token:', error);
      }
    },
    // 建立 WebSocket 连接的方法
    connectWebSocket(token) {
      const wsUrl = `ws://192.168.0.154/target_station/client/competition/wss?competitionId=10&competitionType=2&usePosition=competitionScreen&tmp_token=${token}`
      const socket = new WebSocket(wsUrl)

      socket.onopen = () => {
        console.log('WebSocket connection 建立！.')
      }

      socket.onmessage = (event) => {
        let newData = ''
        console.log('WebSocket message 接收到:', event.data)
          if(event.data != 'ping'){
            
            newData = JSON.parse(event.data);
          console.log(newData,'newData.msgType222');

          this.ceshisocket = newData
          if(newData.msgType == 'ctfTeamRanking'){
            this.oldlist = JSON.parse(JSON.stringify(this.list))
            // 不需要
            this.list = newData.msgContent.rankList.map(item=>{
                return {
                  ...item,
                  R: 1.5 * 5, //天体半径
                  URL: 'img/diqiu.jpg', //天体纹理路径
                  modelPath:
                    '/public/72-baked_animations_intergalactic_spaceships_version_2/Baked_Animations_Intergalactic_Spaceships_Version_2/GLTF_EMBEDDED/Baked_Animations_Intergalactic_Spaceships_Version_2.gltf', // 飞船模型路径
                  revolutionR: 120 * 5, //公转半径
                  orbit: null, // 每个行星都有一个轨道
                }
              });
          }else if(newData.msgType =='notice'){
            console.log(newData.msgType,'newData.msgType');
           this.questionList.unshift(newData.msgContent)
          }else if(newData.msgType =='ctfAnswer'){
            // 每个飞船的加分实时事件
            alert(newData.msgContent.team)
            alert(newData.msgContent.score)
            // this.increaseScore(newData.msgContent.team,newData.msgContent.score)
            this.currentEve.push(newData.msgContent) 
          }
          }
      }

      socket.onerror = (error) => {
        console.error('WebSocket error:', error)
      }

      socket.onclose = () => {
        console.log('WebSocket connection closed.')
      }

      // 将 WebSocket 对象保存为组件的属性
      this.socket = socket
    },
    getRandomPlanet() {
      const randomIndex = Math.floor(Math.random() * this.planets.length)
      return this.planets[randomIndex]
    },
    // 增加一个方法用于计算和显示排名前三的飞船
    showTopThreeLabels() {
      // 首先按照分数对行星排序，分数从高到低
      const sortedList = this.list
        .filter((planet) => planet.name !== '太阳')
        .sort((a, b) => b.score - a.score)

      // 选出前三名行星
      const topThree = sortedList.slice(0, 3)
      // 图标路径，可以根据需要替换为实际的图标地址
      const icons = [
        '/public/img/jin.png', // 第一名的图标路径
        '/public/img/yin.png', // 第二名的图标路径
        '/public/img/tong.png', // 第三名的图标路径
      ]
      // 遍历前三名，给每个飞船添加图标标识
      topThree.forEach((planet, index) => {
        // 找到飞船对象
        const spaceship = this.scene.getObjectByName(planet.name)
        if (spaceship) {
          // 如果已经有标识，先移除旧标识
          const existingLabel = spaceship.children.find(
            (child) => child.userData && child.userData.type === 'topLabel'
          )
          if (existingLabel) { 
            spaceship.remove(existingLabel)
          }

          // 创建新的标识图标
          const div = document.createElement('div')
          div.className = 'top-label'

          // 创建一个 img 元素来显示图标
          const img = document.createElement('img')
          img.src = icons[index] // 设置图片路径为对应的图标
          img.style.width = '30px' // 可以调整图标的宽度
          img.style.height = '30px' // 可以调整图标的高度

          div.appendChild(img) // 将 img 元素添加到 div 中

          // 使用 CSS2DObject 创建标签
          const label = new CSS2DObject(div)
          label.position.set(0, planet.R + 3, 0) // 调整标识位置，使其显示在飞船上方
          label.userData = { type: 'topLabel' } // 给标识添加一个标识符，方便后续查找和移除

          // 添加标签到飞船对象上
          spaceship.add(label)
        }
      })
    },
    jian() {
      this.retreatPlanets()
    },
    initThree() {
      var that = this
      // 创建场景
      var scene = new THREE.Scene()
      this.scene = scene
      // 创建宇宙（背景宇宙球体）
      createUniverse(scene)
      // 调用 createFixedOrbits 函数并获取最外层和最内层圆环
      const { outerCircleMesh, innerCircleMesh } = createFixedOrbits(scene)
      // 0xffd700
      // 添加多个点光源，分别放置在不同的位置
      const light1 = new THREE.PointLight(0xFF6E09, 3, 100000)
      light1.position.set(1000, 1000, 1000) // 放在场景上方的某个位置
      scene.add(light1)

      const light2 = new THREE.PointLight(0xffd700, 3, 3000)
      light2.position.set(0, 0, 0) // 放在场景的另一侧
      scene.add(light2)
      const light3 = new THREE.PointLight(0xFF6E09, 3, 100000)
      light2.position.set(-100, -100, -100) // 放在场景的另一侧
      scene.add(light3)
      // 添加环境光，照亮整个场景0x0f40f3
      const ambientLight = new THREE.AmbientLight(0xFF6E09, 0.16) // 光的强度可以根据需求调整
      scene.add(ambientLight)
      // 创建网格模型
      var arc = new THREE.ArcCurve(0, 0, 1, 0, 2 * Math.PI, true)

      // 初始化标签渲染器，仅需初始化一次
      if (!labelRenderer) {
        labelRenderer = new CSS2DRenderer()
        labelRenderer.setSize(window.innerWidth, window.innerHeight)
        labelRenderer.domElement.style.position = 'absolute'
        labelRenderer.domElement.style.top = '0'
        labelRenderer.domElement.style.pointerEvents = 'none'
        this.$refs.home.appendChild(labelRenderer.domElement) // 确保标签渲染器也附加到 DOM 中
      }
      // 创建固定的轨道线，作为参考
      createFixedOrbits(scene)
      // 获取点数越多，圆弧越光滑
      var points = arc.getPoints(100) //返回一个vector2对象作为元素组成的数组
      var lineGeometry = new THREE.BufferGeometry()
      //setFromPoints方法的本质：遍历points把vector2转变化vector3
      lineGeometry.setFromPoints(points)
      this.magmaFlare = new MagmaFlare() // 创建MagmaFlare实例
      this.magmaFlare.position.set(0, 0, 0) // 将MagmaFlare放置在场景中心
      // 通过scale方法放大太阳（例如放大2倍）
      this.magmaFlare.scale.set(22, 22, 22) // 将X, Y, Z轴的缩放比例设置为2倍
      scene.add(this.magmaFlare) // 添加MagmaFlare到场景中

      // 繁星
      var plan = particle()
      scene.add(plan)

      this.list.forEach((type, index) => {
        if (type.name != '太阳') {
          this.loadSpaceship(scene, type) // 对每个非太阳对象加载模型
        }
      })

      //环境光
      const ambient = new THREE.AmbientLight(0x404040, 0.6) // 调整光的强度
      scene.add(ambient)
  
      const width = this.$refs.home.clientWidth
      const height = this.$refs.home.clientHeight
      //创建相机对象
      camera = new THREE.PerspectiveCamera(45, width / height, 1, 13000)
      camera.position.set(
        235.0912850575463,
        935.0912850575461,
        834.0365140230186
      ) //设置相机位置
      camera.lookAt(scene.position) 


      renderer = new THREE.WebGLRenderer({
        antialias: true, //开启锯齿
      })
      renderer.setSize(width, height) //设置渲染区域尺寸
      this.$refs.home.appendChild(renderer.domElement)
      that.$refs.home.appendChild(labelRenderer.domElement)
      let clock = new THREE.Clock() // 用于计算时间增量

      // 渲染函数
      function render() {
        const delta = clock.getDelta() // 计算时间增量
        // 更新所有行星的动画
        that.list.forEach((planet) => {
          if (planet.mixer) {
            setTimeout(() => {
              planet.mixer.update(delta) // 更新动画
            }, 2222)
          }
        })
        // 更新MagmaFlare动画效果
        setTimeout(() => {
          that.magmaFlare.update()
        }, 111)
        // 让最外侧的圆环慢慢旋转
        if (outerCircleMesh) {
          outerCircleMesh.rotation.z += 0.002 // 调整旋转速度
        }

        // 让最内侧的圆环也缓慢旋转
        if (innerCircleMesh) {
          innerCircleMesh.rotation.z -= 0.002 // 反方向旋转
        }

        scene.children.forEach((type) => {
          if (
            type.type === 'Group' &&
            type.data &&
            type.data.revolutionR !== undefined &&
            type.data.revolutionR !== 0
          ) {
            // 太阳不参与逻辑
            type.rotateY(0)
            type.angle += 0.001 // 每次执行render角度新增加
            var x = type.data.revolutionR * Math.sin(type.angle) //地球x坐标计算
            var z = type.data.revolutionR * Math.cos(type.angle) //地球z坐标计算
            // 设置地球xz坐标，实现公转动画
            type.position.set(x, 0, z)
            // 计算相机和天体的距离
            const distance = camera.position.distanceTo(type.position)
            // 查找并控制标签的可见性
            if (type.children.length > 0) {
              const label = type.children.find(
                (child) => child instanceof CSS2DObject
              )
            }
          }
        })
        // 如果有最外侧的轨道纹理，可以让它轻微旋转

        renderer.render(scene, camera) //执行渲染操作
        labelRenderer.render(scene, camera) //执行渲染标签层
        requestAnimationFrame(render) 
      }

      // 创建Raycaster对象用于检测鼠标点击事件
      const raycaster = new THREE.Raycaster()
      const mouse = new THREE.Vector2()

      window.addEventListener('click', (event) => {
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1

        // 通过鼠标点的位置和当前相机更新Raycaster
        raycaster.setFromCamera(mouse, camera)

        // 计算物体和Raycaster的焦点
        const intersects = raycaster.intersectObjects(scene.children)

        // 如果有物体被点击
        if (intersects.length > 0) {
          const selectedObject = intersects[0].object
          console.log(selectedObject, 'selectedObjectselectedObject111111111')

          // 检查物体是否为行星
          if (
            selectedObject.name &&
            this.list.some((planet) => planet.name === selectedObject.name)
          ) {
            // 如果物体是行星，则弹窗显示其名称
            alert(`点击了行星: ${selectedObject.name}`)
            if (selectedPlanet) {
              // 显示行星信息
              this.planetMsg = selectedObject
            } else {
              // 如果点击的是其他物体，隐藏行星信息
              this.planetMsg = null
            }
          }

          // 这里可以弹出更多详细信息或使用UI框展示更多内容
        }
      })

      render()

      // 渲染循环
      const animate = () => {
        requestAnimationFrame(animate)
        renderer.render(scene, camera)
        labelRenderer.render(scene, camera) // 添加标签渲染器
      }
      animate()
      var controls = new OrbitControls(camera, renderer.domElement) //不能删

      this.scene = scene
    },
    // 行星-飞船
    loadSpaceship(scene, planet) {
      const loader = new GLTFLoader()
      let mixer // 动画混合器
      // 加载飞船模型
      loader.load(
        planet.modelPath,
        (gltf) => {
          const spaceship = gltf.scene
          spaceship.name = planet.name // 确保设置了正确的名称
          spaceship.data = planet // 确保添加了数据
          // 缩放飞船，使其替代行星的球体
          spaceship.scale.set(planet.R, planet.R, planet.R)

          // 初始随机位置
          const angle = Math.random() * Math.PI * 2
          const x = planet.revolutionR * Math.sin(angle)
          const z = planet.revolutionR * Math.cos(angle)
          spaceship.position.set(x, 0, z)
          spaceship.angle = angle

          // 添加到场景
          scene.add(spaceship)
          // 创建标签元素
          const div = document.createElement('div')
          div.className = 'msg-div2'
          div.innerHTML = `<div class="parameter-div"><div class="name">${planet.name}</div></div>`
          // 确保标签允许接收点击事件
          div.style.pointerEvents = 'auto'
          // 将 click 事件绑定到实际的 DOM 元素
          // 全局状态对象，用于追踪每个行星标签的显示状态
          const labelVisibilityState = {}

          // 初始化时，将所有标签设为可见状态
          this.list.forEach((planet) => {
            labelVisibilityState[planet.name] = false // 默认所有标签可见
          })

          div.addEventListener('click', (event) => {
            console.log(`点击了 ${planet.name} 标签66`)
            event.stopPropagation() // 防止事件冒泡到其他层级
            // 切换当前行星标签的显示状态
            if (this.labelVisibilityState[planet.name]) {
              label.element.style.display = 'none' // 隐藏标签
            } else {
              label.element.style.display = 'block' // 显示标签
            }

            // 手动隐藏标记为 true，避免渲染循环继续控制该标签
            this.manualHideFlag = true

            // 设置 3 秒后自动恢复为渲染循环控制
            setTimeout(() => {
              this.manualHideFlag = false // 恢复渲染循环控制标签显示
            }, 3000)

            // 更新全局状态
            this.labelVisibilityState[planet.name] =
              !this.labelVisibilityState[planet.name]

            // 调用方法显示行星详情
            this.showPlanetDetail(planet, event)
          })

          const label = new CSS2DObject(div)
          label.position.set(0, planet.R - 2, 0) // 将标签放置在飞船上方
          spaceship.add(label) // 把标签添加到飞船上

          // 更新飞船位置和朝向
          const updateSpaceshipPosition = () => {
            spaceship.angle += 0.00001 // 更新角度
            const x = planet.revolutionR * Math.sin(spaceship.angle)
            const z = planet.revolutionR * Math.cos(spaceship.angle)
            spaceship.position.set(x, 0, z)

            // 飞船始终朝向太阳
            const sunPosition = new THREE.Vector3(0, 0, 0)
            spaceship.lookAt(sunPosition)

            requestAnimationFrame(updateSpaceshipPosition)
          }
          updateSpaceshipPosition()
          // 创建动画混合器
          mixer = new THREE.AnimationMixer(spaceship)
          // // 将 mixer 添加到 this 以便在渲染循环中更新
          planet.mixer = mixer
          // 遍历模型中的所有动画片段，并创建动画动作
          planet.actions = gltf.animations.map((clip) => mixer.clipAction(clip))

          // 默认不播放动画，加载完成后动画处于停止状态
          planet.actions.forEach((action) => action.play())

          // 保存 mixer 和动画动作到 planet 对象中，以便在加分时启动动画
        },
        undefined,
        (error) => {
          console.error('加载飞船模型时出错:', error)
        }
      )
    },
    // 点击标签的详情卡片
    showPlanetDetail(planet, event) {
      // 切换 planetDetailVisible 的状态
      this.planetDetailVisible = !this.planetDetailVisible

      // 记录标签的点击位置
      this.detailPosition = {
        top: event.clientY, // 点击时鼠标的Y坐标
        left: event.clientX, // 点击时鼠标的X坐标
      }

      // 更新 planetMsg 为点击的行星
      if (this.planetDetailVisible) {
        this.planetMsg = planet

        // 如果详情显示，启动定时器3秒后自动关闭
        setTimeout(() => {
          this.planetDetailVisible = false
        }, 3000) // 3秒后关闭
      }
    },
    onWindowResize() {
      // Update camera
      const width = this.$refs.home.clientWidth
      const height = this.$refs.home.clientHeight
      camera.aspect = width / height
      camera.updateProjectionMatrix()
      console.log(
        camera.position.x + ',' + camera.position.y + ',' + camera.position.z
      )
      // Update renderer
      renderer.setSize(width, height)
      labelRenderer.setSize(width, height)
    },
    // 随机增加所有行星的分数
    // increaseScore(planetName,score) {
    //   let maxScore = 0
    //   const planet = this.list.find((p) => p.name === planetName)

    //   if (planet) {
    //     const spaceship = this.scene.getObjectByName(planet.name)
    //     if (spaceship) {
    //       // 在飞船上方显示分数
    //       showScoreLabel(spaceship, score, planet.name)
    //     }
    //   }
    //   this.list.forEach((team) => {
    //     console.log(team,'team');
        
    //   if (team.name !== '太阳') {
    //     const randomIncrease = score;
    //     const spaceship = this.scene.getObjectByName(team.name);
    //     if (team.name === planetName) {
      
    //       team.score += randomIncrease;
    //       if (spaceship) {
    //         showScoreLabel(spaceship, randomIncrease, team.name);
    //         const particleSystem = this.createParticleSystem();
    //         particleSystem.position.copy(spaceship.position);
    //         this.scene.add(particleSystem);
    //         console.log('粒子系统已添加');
    //         this.fadeOutParticleSystem(particleSystem);
    //       }
    //     }
    //     // 继续检查最高分和更新距离
    //     if (team.score > maxScore) {
    //       maxScore = team.score;
    //     }
    //       // 更新行星与太阳的距离
          
    //         const scoreRatio = team.score / this.totalScore;
    //         team.revolutionR = this.calculateRevolutionR(scoreRatio);
    //   }
    // });

    //   // 检查最高分是否超过总分的 85%
    //   while (maxScore > this.totalScore * 0.85) {
    //     this.totalScore *= 1.2 // 将总分增加 20%
    //     this.totalScore = this.totalScore.toFixed(0)
    //     setTimeout(() => {
    //       this.retreatPlanets() // 所有行星后退
    //     }, 111)
    //     maxScore = Math.max(...this.list.map((team) => team.score)).toFixed(0) // 重新计算最高分
    //     this.HighScore = maxScore
    //     this.HighScoreAVE = this.HighScore / this.totalScore
    //   }
    //   // 调用方法更新前三名标识
    //   this.showTopThreeLabels()
    //   // 显示特写
    //   // this.showCloseupForTopThree();
    // },
    increaseScore() {
  let maxScore = 0;
  
  // 遍历新的 list 数组
  this.list.forEach((newPlanet, index) => {
    const oldPlanet = this.oldlist.find((p) => p.name === newPlanet.name);
    if (oldPlanet) {
      const scoreDifference = newPlanet.score - oldPlanet.score;

      // 获取飞船对象
      const spaceship = this.scene.getObjectByName(newPlanet.name);
      
      // 如果分数差值大于 0，则触发粒子特效并显示分数
      if (scoreDifference > 0) {
        if (spaceship) {
          // 在飞船上方显示加分效果
          showScoreLabel(spaceship, scoreDifference, newPlanet.name);

          // 创建粒子特效
          const particleSystem = this.createParticleSystem();
          particleSystem.position.copy(spaceship.position);
          this.scene.add(particleSystem);
          console.log('粒子系统已添加');

          // 粒子系统淡出
          this.fadeOutParticleSystem(particleSystem);
        }

        // 更新行星的分数
        newPlanet.score += scoreDifference;
      }

      // 检查并更新最高分
      if (newPlanet.score > maxScore) {
        maxScore = newPlanet.score;
      }

      // 更新行星与太阳的距离
      const scoreRatio = newPlanet.score / this.totalScore;
      newPlanet.revolutionR = this.calculateRevolutionR(scoreRatio);
    }
  });

  // 检查最高分是否超过总分的 85%
  while (maxScore > this.totalScore * 0.85) {
    this.totalScore *= 1.2; // 将总分增加 20%
    this.totalScore = this.totalScore.toFixed(0);

    setTimeout(() => {
      this.retreatPlanets(); // 所有行星后退
    }, 111);

    // 重新计算最高分
    maxScore = Math.max(...this.list.map((team) => team.score)).toFixed(0);
    this.HighScore = maxScore;
    this.HighScoreAVE = this.HighScore / this.totalScore;
  }

  // 调用方法更新前三名标识
  this.showTopThreeLabels();
  
  // 更新 oldlist 为当前的 list
  this.oldlist = JSON.parse(JSON.stringify(this.list)); 
},

    // 创建发光的飞船粒子系统
    createParticleSystem() {
      const particleCount = 100 // 增加粒子数量
      const particles = new THREE.BufferGeometry()
      const positions = []
      const sizes = []
      const colors = []

      // 生成粒子的位置和颜色
      for (let i = 0; i < particleCount; i++) {
        // 生成粒子随机位置，让它们分布在飞船后方
        const x = (Math.random() - 0.5) * 90 // 增大范围
        const y = (Math.random() - 0.5) * 90
        const z = (Math.random() - 0.5) * 40
        positions.push(x, y, z)

        // 每个粒子的随机大小
        sizes.push(Math.random() * 5 + 1) // 增大粒子尺寸

        // 每个粒子的颜色（RGB）
        const color = new THREE.Color(0xff5500) // 橙色发光效果
        color.offsetHSL(0, 0, Math.random() * 0.2) // 随机偏移亮度
        colors.push(color.r, color.g, color.b) // 设置颜色
      }

      // 设置粒子的位置、大小和颜色
      particles.setAttribute(
        'position',
        new THREE.Float32BufferAttribute(positions, 3)
      )
      particles.setAttribute('size', new THREE.Float32BufferAttribute(sizes, 1))
      particles.setAttribute(
        'color',
        new THREE.Float32BufferAttribute(colors, 3)
      ) // 设置颜色

      // 创建材质，启用透明度并使用 AdditiveBlending 以增强发光效果
      const particleMaterial = new THREE.PointsMaterial({
        vertexColors: true, // 使用顶点颜色
        size: 10, // 粒子初始大小
        transparent: true, // 启用透明度
        opacity: 0.8, // 粒子透明度稍高，增强发光效果
        blending: THREE.AdditiveBlending, // 使用加法混合模式，增强发光
        depthWrite: false, // 禁止深度写入，防止粒子互相遮挡
        map: new THREE.TextureLoader().load('/public/img/lizi.webp'), // 使用发光纹理
        // map: new THREE.TextureLoader().load("/public/img/lizi.webp"), // 使用发光纹理
      })

      // 创建粒子系统
      const particleSystem = new THREE.Points(particles, particleMaterial)
      return particleSystem
    },
    // 删除飞船粒子并添加动态的粒子淡出效果
    fadeOutParticleSystem(particleSystem, duration = 2000) {
      let startTime = null

      const fadeOut = (timestamp) => {
        if (!startTime) startTime = timestamp
        const progress = timestamp - startTime
        const opacity = Math.max(1 - progress / duration, 0) // 粒子的透明度逐渐减少

        // 逐步减小粒子系统的透明度
        particleSystem.material.opacity = opacity

        if (opacity > 0) {
          requestAnimationFrame(fadeOut) // 继续执行下一帧
        } else {
          // 完全透明后移除粒子系统
          if (this.scene) {
            this.scene.remove(particleSystem) // 移除粒子系统
            console.log('粒子系统已移除')
          }
        }
      }

      requestAnimationFrame(fadeOut.bind(this)) // 启动动画
    },
    // 让所有行星统一后退一定距离，太阳不受影响
    retreatPlanets() {
      this.list.forEach((team) => {
        if (team.name !== '太阳') {
          // 跳过太阳
          team.revolutionR += 20 * 5 // 所有行星统一后退 20 * K 的距离
        }
      })
    },

    // 计算 revolutionR，根据分数比例来计算行星距离
    calculateRevolutionR(scoreRatio) {
      const maxDistance = 120 * 5 // 最大距离
      const minDistance = 20 * 5 // 最小距离
      return Math.max((1 - scoreRatio) * maxDistance, minDistance)
    },
  },
  beforeDestroy() {
    if (this.socket) {
      this.socket.close()
    }
    if (this.intervalId) {
      clearInterval(this.intervalId)
    }
  },
  watch: {
    list: {
      handler(newVal, oldVal) {
        // 处理 list 变化时的逻辑
       
        //   newVal.forEach(item=>{
        //     oldVal.forEach(item2=>{
        //       if(item.name == item2.name){
                
                
        //         const cha = item.score - item2.score
        //         console.log(cha,'0000000000000000');
        //       if(cha){
        //         console.log('处理 list 变化时的逻辑', newVal);
        //         this.increaseScore(item.name,item.score)
        //       }
        //       }
        //   })
        // })
      },
      deep: true // 深度监听
    }
  }
  
}
</script>
